<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>图片提示词选择器</title>
  <link rel="stylesheet" href="./lib/elementui.css" />

  <style>
    .el-dialog {
      margin-top: 8vh !important;
    }

    .el-input__inner {
      height: 32px;
    }

    .el-input__icon {
      line-height: 35px;
      cursor: pointer;
    }

    .el-dialog__headerbtn {
      font-size: 28px;
    }

    .el-link {
      justify-content: left;
      font-size: 12px;
      line-height: 24px;
      height: 32px;
      white-space: nowrop;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .el-link.el-link--info {
      color: #333;
    }

    .tip-box {
      background: #d8d3d3;
      height: 550px;
      display: flex;
      flex-direction: row;
    }

    .main-left {
      background: #fff;
      display: flex;
      flex-direction: row;
    }

    .main-left ::-webkit-scrollbar {
      display: none;
    }

    .actived {
      color: #333 !important;
      background: linear-gradient(to right, #8cc2dc 0%, #fdfeff 100%);
      font-weight: bolder;
      border-radius: 5px;
    }

    .main-right {
      padding: 0 20px;
      background: #fff;
      overflow: hidden;
    }

    .el-slider__bar {
      background-color: #ccc !important;
    }

    .el-slider__button {
      border: 2px solid #8cc2dc;
      background-color: #8cc2dc;
    }

    .el-dialog__footer {
      padding-top: 0;
    }

    .el-button--mini,
    .el-button--mini.is-round {
      padding: 9px;
    }

    .mytag {
      display: flex;
      align-items: center;
      background-color: #ecf5ff;
      padding: 7px;
      border: 1px solid #eee;
      font-size: 14px;
      border-radius: 5px;
      margin: 5px;
      color: #007cba;
      cursor: pointer;
    }

    .mytag.actived {
      background-color: #cae6f4;
    }

    .mytag i {
      font-size: 16px;
      color: #007cba;
    }

    .mytag i:hover {
      color: red;
    }
  </style>
</head>

<body>
  <div id="app">
    <a @click.prevent="openTip(0)"><i class="fa fa-edit"></i> 快捷编辑</a>

    <!-- 选项卡控制 -->
    <el-tabs type="border-card" style="width: 339px; margin-top: 20px">
      <el-tab-pane>
        <span slot="label"><i class="el-icon-collection"></i> 内容描述</span>
        <div style="
              display: flex;
              align-items: center;
              justify-content: space-between;
              margin-top: 10px;
              margin-bottom: 10px;
            ">
          <div>
            <span style="font-size: 14px; color: #666; margin-right: 5px">主体描述</span>
            <img src="./images/Vector.png" alt="帮助" style="width: 12px; cursor: pointer" />
          </div>
          <div style="
                display: flex;
                align-items: center;
                justify-content: space-between;
              ">
            <img src="./images/catb.png" alt="翻译" style="width: 22px; margin-right: 5px" />
            <el-switch v-model="langStatus" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
          </div>
        </div>
        <el-input type="textarea" :rows="5" placeholder="Please enter" v-model="mainInfo"></el-input>

        <div style="
              display: flex;
              align-items: center;
              justify-content: space-between;
              margin-top: 30px;
              margin-bottom: 10px;
            ">
          <div>
            <span style="font-size: 14px; color: #666; margin-right: 5px">次要描述</span>
            <img src="./images/Vector.png" alt="帮助" style="width: 12px; cursor: pointer" />
          </div>
        </div>
        <el-input type="textarea" :rows="5" placeholder="Please enter" v-model="otherInfo"></el-input>
      </el-tab-pane>

      <el-tab-pane>
        <span slot="label"><i class="el-icon-message"></i> 提 示 词</span>
        <div style="margin-top: 10px; margin-bottom: 10px">
          <div style="
                display: flex;
                align-items: center;
                margin-top: 10px;
                margin-bottom: 10px;
              ">
            <span style="font-size: 14px; color: #666; margin-right: 5px">场景</span>
            <img src="./images/Vector.png" alt="帮助" style="width: 12px; cursor: pointer" />
          </div>
          <div style="
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                margin-top: 10px;
                margin-bottom: 10px;
              ">
            <div v-for="(tag, index) in chosedTips" class="mytag" v-if="tag.path[0] === 0">
              <span>{{tag.tname + '::' + tag.leavel}}</span>
              <i class="el-icon-delete" style="margin-left: 5px" @click="removeTip(index)"></i>
            </div>
            <el-button type="primary" icon="el-icon-plus" plain size="mini" @click="openTip(0)"></el-button>
          </div>

          <div style="
                display: flex;
                align-items: center;
                margin-top: 20px;
                margin-bottom: 10px;
              ">
            <span style="font-size: 14px; color: #666; margin-right: 5px">摄像机</span>
            <img src="./images/Vector.png" alt="帮助" style="width: 12px; cursor: pointer" />
          </div>
          <div style="
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                margin-top: 10px;
                margin-bottom: 10px;
              ">
            <div v-for="(tag, index) in chosedTips" class="mytag" v-if="tag.path[0] === 1">
              <span>{{tag.tname + '::' + tag.leavel}}</span>
              <i class="el-icon-delete" style="margin-left: 5px" @click="removeTip(index)"></i>
            </div>
            <el-button type="primary" icon="el-icon-plus" plain size="mini" @click="openTip(1)"></el-button>
          </div>

          <div style="
                display: flex;
                align-items: center;
                margin-top: 20px;
                margin-bottom: 10px;
              ">
            <span style="font-size: 14px; color: #666; margin-right: 5px">光线</span>
            <img src="./images/Vector.png" alt="帮助" style="width: 12px; cursor: pointer" />
          </div>
          <div style="
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                margin-top: 10px;
                margin-bottom: 10px;
              ">
            <div v-for="(tag, index) in chosedTips" class="mytag" v-if="tag.path[0] === 2">
              <span>{{tag.tname + '::' + tag.leavel}}</span>
              <i class="el-icon-delete" style="margin-left: 5px" @click="removeTip(index)"></i>
            </div>
            <el-button type="primary" icon="el-icon-plus" plain size="mini" @click="openTip(2)"></el-button>
          </div>
        </div>
      </el-tab-pane>

      <el-tab-pane>
        <span slot="label"><i class="el-icon-set-up"></i> 命令参数</span>
        <div>命令参数具体详细逻辑待进一步确认</div>
      </el-tab-pane>
    </el-tabs>

    <!-- 装配提示词 弹窗 -->
    <el-dialog :visible.sync="selectVisible" width="1360px" height="800px">
      <div style="
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 60px;
            margin-top: -10px;
          " slot="title">
        <h2 style="font-size: 22px; color: #ccc;font-weight: bolder;letter-spacing: 1px;margin-left: 15px;">
          {{ tipsLangStatus ? 'Image Prompts' : '图片提示词' }}</h2>
        <span style="display: flex; align-items: center">
          <el-autocomplete class="inline-input" v-model.trim="searchKey" style="width: 320px; margin-right: 550px;"
            :fetch-suggestions="querySearch" :placeholder="!tipsLangStatus ? '试试搜索 “光”' : 'Try Search ‘Light’' " :trigger-on-focus="false"
            @select="handleSelect"><el-button slot="append" icon="el-icon-search"></el-button></el-autocomplete>
      </div>
      <!-- 分割线 -->
      <div style="
            border-bottom: 1px solid #ddd;
            margin-top: -30px;
            margin-bottom: 1px;
          "></div>

      <div class="tip-box">
        <div class="main-left">
          <!-- 第一级分类 -->
          <div style="
                border-right: 1px solid #ddd;
                margin-right: 5px;
                padding: 10px;
                width: 160px;
                height: 555px;
                overflow: auto;
                border-radius: 10px;
              ">
            <el-link type="info" :underline="false" v-for="(item, index) in dataList"
              :class="choseTipPath[0]==index ? 'actived': ''" @click="choseFir(index)" style="
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                  line-height: 32px;
                  text-align: left;
                  width: 135px;
                  display: block;
                  padding: 3px 10px;
                  margin: 2px 0;
                  cursor: pointer;
                  color: #333;
                  font-size: 14px;
                ">
              <span style="color: #111">{{tipsLangStatus ? item.tname : item.cname}}</span>
            </el-link>
          </div>
          <!-- 第二级分类 -->
          <div style="
                border-right: 1px solid #ddd;
                margin-right: 5px;
                padding: 10px;
                width: 160px;
                height: 555px;
                overflow: auto;
                border-radius: 10px;
              ">
            <el-link type="info" :underline="false" v-for="(item, index) in sectypes"
              :class="choseTipPath[1]==index ? 'actived': ''" @click="choseSec(index)" style="
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                  line-height: 32px;
                  text-align: left;
                  width: 135px;
                  display: block;
                  padding: 3px 10px;
                  margin: 2px 0;
                  cursor: pointer;
                  color: #333;
                  font-size: 14px;
                ">
              <span style="color: #111">{{tipsLangStatus ? item.tname : item.cname}}</span>
            </el-link>
          </div>
          <!-- 第三级分类 -->
          <div style="
                border-right: 1px solid #ddd;
                margin-right: 5px;
                padding: 10px;
                width: 160px;
                height: 555px;
                overflow: auto;
                border-radius: 10px;
              ">
            <el-link type="info" :underline="false" v-for="(item, index) in thirdatas"
              :class="getIndexFromChosedTips([choseTipPath[0], choseTipPath[1], index])>-1 ? 'actived': ''"
              @click="choseThir(index)" style="
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                  line-height: 32px;
                  text-align: left;
                  width: 135px;
                  display: block;
                  padding: 3px 10px;
                  margin: 2px 0;
                  cursor: pointer;
                  color: #333;
                  font-size: 14px;
                ">
              {{ tipsLangStatus ? item.tname : item.cname }}
            </el-link>
          </div>
        </div>

        <!-- 右侧展示栏目 -->
        <div class="main-right">
          <div class="header" style="
                margin-top: 20px;
                display: flex;
                align-items: center;
                justify-content: space-between;
              ">
            <div>
              <span style="font-size: 15px; color: #111; margin-right: 10px">{{ tipsLangStatus ? choseTip.tname :
                choseTip.cname }}</span>
            </div>
            <div style="
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                ">
              <img src="./images/catb.png" alt="翻译" style="width: 21px; margin-right: 5px" />
              <el-switch v-model="tipsLangStatus" active-color="#007cba" inactive-color="#888888" active-text="En"
                inactive-text="中"></el-switch>
            </div>
          </div>
          <div style="color: #888; line-height: 22px; margin-top: 10px">
            {{ tipsLangStatus ? choseTip.disc : choseTip.cinfo }}
          </div>

          <div style="
                background: #eee;
                width: 710px;
                height: 350px;
                padding: 10px;
                margin-top: 20px;
                border-radius: 10px;
              ">
            <el-image style="width: 700px; height: 350px;" :src="choseTip.pic" fit="contain"
              :preview-src-list="[choseTip.pic]"></el-image>
          </div>
          <div style="
                display: flex;
                justify-content: center;
                align-items: center;
                margin-top: 10px;
              ">
            <el-slider v-model="choseTipLeavel" :step="1" :min="-3" :max="3" style="width: 520px" :marks="marks"
              @change="addTips"></el-slider>
          </div>
        </div>
      </div>

      <!-- 底部分割线 -->
      <div style="border-top: 1px solid #ddd; margin-top: 25px"></div>

      <!-- 底部元素 -->
      <div slot="footer" style="display: flex; justify-content: space-between">
        <div style="display: flex; flex-wrap: wrap; width: 1000px">
          <div v-for="(tag, index) in chosedTips" class="mytag" style="margin-left: 0" @click="choseSetTip(tag, index)"
            :class="mychoseIndex === index? 'actived': ''">
            <span>{{(tipsLangStatus ? tag.tname : tag.cname )+ '::' +
              tag.leavel}}</span>
            <i class="el-icon-delete" style="margin-left: 5px" @click.stop="removeTip(index)"></i>
          </div>
        </div>

        <el-button type="primary" @click="confirm" v-if="chosedTips.length > 0" >
          {{ tipsLangStatus ? 'Use Current Prompts' : '使用当前提示词' }}
        </el-button>
        <el-button disabled v-else >
          {{ tipsLangStatus ? 'Plase Chose Prompts' : '请点击选择提示词' }}
        </el-button>
      </div>
    </el-dialog>
  </div>
</body>

</html>
<!-- 导包，导入相关框架依赖及基础数据结构 -->
<script src="./lib/vue.js"></script>
<script src="./lib/elementui.js"></script>
<script src="./lib/axios.js"></script>
<script src="./lib/dataList.js"></script>

<script>
  new Vue({
    el: "#app",
    data() {
      return {
        // 控制提示词选择器弹框
        selectVisible: false,
        // 搜索提示词关键字
        searchKey: "",
        // 提示词中英文状态
        tipsLangStatus: false,
        // 提示词基础数据
        dataList,
        // 当前选中被操作的提示词，层级路径
        choseTipPath: [0, 0, 0],
        // 当前选中被操作的提示词，设置权重
        choseTipLeavel: 0,
        // 选中的提示词
        chosedTips: [],
        // 底部操作选中的索引
        mychoseIndex: 0,
        // 权重值步进提示
        marks: {
          "-3": "-3",
          "-2": "-2",
          "-1": "-1",
          0: "<- · ->",
          1: "1",
          2: "2",
          3: "3",
        },
        // 中文 英文 翻译状态
        langStatus: true,
        // 主体描述
        mainInfo: "",
        // 次要描述
        otherInfo: "",
      };
    },
    computed: {
      // 二级分类
      sectypes() {
        return this.dataList[this.choseTipPath[0]].children;
      },
      // 三级数据
      thirdatas() {
        return this.dataList[this.choseTipPath[0]].children[
          this.choseTipPath[1]
        ].children;
      },
      // 选中的提示词
      choseTip() {
        return this.dataList[this.choseTipPath[0]].children[
          this.choseTipPath[1]
        ].children[this.choseTipPath[2]];
      },
    },
    methods: {
      // 展开提示词选择的弹窗
      openTip(index) {
        this.choseFir(index);
        this.selectVisible = true;
      },
      getIndexFromChosedTips(tipPath) {
        // 判断是否存在已选择的位置，修改权重，同时返回查询到的索引值
        let findex = -1;
        this.chosedTips.forEach((item, index) => {
          if (JSON.stringify(item.path) === JSON.stringify(tipPath)) {
            findex = index;
          }
        });
        return findex;
      },
      // 判断当前选择的提示词 是否已经被选中，若被选中 修改其对应权重，未被选中 权重初始化为 0
      findIndexINChosedTips(tipPath) {
        const findex = this.getIndexFromChosedTips(tipPath);
        if (findex > -1) {
          this.choseTipLeavel = this.chosedTips[findex].leavel;
          this.mychoseIndex = findex;
        } else {
          this.choseTipLeavel = 0;
        }
        return findex;
      },
      // 点击一级选项
      choseFir(index) {
        this.choseTipPath = [index, 0, 0];
        this.findIndexINChosedTips(this.choseTipPath);
      },
      // 二级选择
      choseSec(index) {
        this.choseTipPath[1] = index;
        this.choseTipPath[2] = 0;
        this.choseTipPath = [...this.choseTipPath];
        this.findIndexINChosedTips(this.choseTipPath);
      },
      // 提示词选择
      choseThir(index) {
        this.choseTipPath[2] = index;
        this.choseTipPath = [...this.choseTipPath];
        console.log(this.choseTipPath);
        const findex = this.getIndexFromChosedTips(this.choseTipPath);
        if (findex < 0) {
          // 点击当前提示词 未选择，直接添加当前提示词
          this.addTips();
        } else {
          // 当前提示词 已选择，直接取消选择当前提示词
          this.removeTip(findex);
        }
      },
      // 输入内容，匹配可以选择的 提示词
      querySearch(queryString, cb) {
        console.log(queryString);
        const results = [];
        for (let i = 0; i < dataList.length; i++) {
          for (let j = 0; j < dataList[i].children.length; j++) {
            for (let k = 0; k < dataList[i].children[j].children.length; k++) {
              if (
                dataList[i].children[j].children[k].tname
                  .toLowerCase()
                  .indexOf(this.searchKey.toLowerCase()) > -1 ||
                dataList[i].children[j].children[k].cname.indexOf(
                  this.searchKey
                ) > -1
              ) {
                // 只要符合就添加进数据
                results.push({
                  ...dataList[i].children[j].children[k],
                  value:
                    dataList[i].children[j].children[k].cname +
                    "-" +
                    dataList[i].children[j].children[k].tname,
                  path: [i, j, k],
                });
              }
            }
          }
        }
        // 调用 callback 返回建议列表的数据
        cb(results);
      },
      // 点击下拉框，选中一个元素
      handleSelect(item) {
        this.choseTipPath = item.path;
        this.addTips();
      },
      // 添加提示词 到选择数组  两种情况  存在则修改  不存在则添加
      addTips() {
        // 判断当前操作的 提示词 是否已经存在在数组中了
        const findex = this.getIndexFromChosedTips(this.choseTipPath);
        if (findex > -1) {
          this.chosedTips[findex].leavel = this.choseTipLeavel;
          this.chosedTips = [...this.chosedTips];
          this.mychoseIndex = findex;
        } else {
          if (this.chosedTips.length >= 50) {
            this.$message({
              type: "info",
              message: "亲，最多只能选择 50 条提示词！",
            });
            return;
          }
          this.chosedTips.push({
            ...this.choseTip,
            // 注意：这里需要进行解构，不然的话，会造成数组异常
            path: [...this.choseTipPath],
            leavel: 0,
          });
          this.choseTipLeavel = 0;
          this.mychoseIndex = this.chosedTips.length - 1;
        }
      },
      // 移除一个提示词，使用 index 删除是有 Bug 的，两种场景！下方的删除，还有一个是 再次点击的删除
      removeTip(index) {
        this.chosedTips.splice(index, 1);
      },
      // 点击一个提示词，反向选择位置
      choseSetTip(tag, index) {
        if (this.chosedTips.length === 0) return;
        // tag 是一个引用值，在设置的时候，要小心，对于引用类型还是要注意
        this.choseTipPath = [...tag.path];
        this.choseTipLeavel = tag.leavel;
        this.mychoseIndex = index;
      },
      // 新增提示词弹窗操作
      openAddTip() {
        this.$message({
          type: "info",
          message: "亲，功能暂未开放，敬请等待！",
        });
      },

      confirm() {
        this.selectVisible = false;
        var vals =
          $("#prompts_style")
            .val()
            .split(",")
            .map((v) => $.trim(v))
            .filter((v) => !!v) || [];
        this.chosedTips.forEach((v) => {
          if (v.tname && vals.indexOf(v.tname) === -1) {
            vals.push(v.tname);
          }
        });
        $("#prompts_style").val(vals.join(","));
      },
    },
  });
</script>